<template>
	<view>
		<map name="" style="width: 100%;height: 100vh;" 
		:polyline="polyline" :markers="marker" :latitude="marker[0].latitude" :longitude="marker[0].longitude " :circles="circlesObj">
		
		
		</map>
	</view>
</template>

<script>
	import GDMap from '@/js_sdk/amap-wx/amap-wx.130'
	export default {
		data() {
			return {
				polyline: [],
				// 标记起始位置
				marker:[],
				//地图圆形
				circlesObj:[]
					
				
				
			}
		},
		onLoad(option) {
			let {
				origin,
				destination
			} = option;
		
			let marker = [];
			marker = [
				{
					id:1,
					latitude:origin.split(',')[1],
					longitude:origin.split(',')[0],
					iconPath:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/03c3968f-6ce9-4f00-b880-89e8861162fd.png',
					width:30,
				},{
					id:2,
					latitude:destination.split(',')[1],
					longitude:destination.split(',')[0],
				}
			]
				let circlesObj={
					longitude:marker[0].longitude,
					latitude:marker[0].latitude,
					fillColor:"#31E8A523",
					radius:130,
					color:"#31E8A523"
				}
			this.circlesObj.push(circlesObj)
		
			this.marker = marker;

			this.mapgd = new GDMap.AMapWX({
				key: '364c1096e6b21c6e94ffaf5cc02e4d08'
			});
            //根据地点获取地图位置
			this.mapgd.getDrivingRoute({
				origin,
				destination,
				success: data => {
					console.log(data)
					var points = [];
					if (data.paths && data.paths[0] && data.paths[0].steps) {
						var steps = data.paths[0].steps;
						for (var i = 0; i < steps.length; i++) {
							var poLen = steps[i].polyline.split(';');
							for (var j = 0; j < poLen.length; j++) {
								points.push({
									longitude: parseFloat(poLen[j].split(',')[0]),
									latitude: parseFloat(poLen[j].split(',')[1])
								})
							}
						}
					}
					this.polyline = [{
						points: points,
						color: "#0091ff",
						width: 6,
						arrowLine:true
					}]
				}
			})
		},
		methods: {

		}
	}
</script>

<style scoped>

</style>
